<template>
	<view class="tabNav">
		<view class="tabItem"
			:class="[tabIndex == index ? 'active' : '']"
			v-for="(item,index) in tabData"
			:key="index"
			@tap="switchStatus(index,item.id)"
		>
			<text>{{item.name}}</text>
			<view class="lineView posAbso"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			tabData:Array,
			tabIndex:Number
		},
		methods:{
			switchStatus(index,id){
				this.$emit('switchStaus',index,id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabNav{
		height: var(--hei90);
		border-bottom: $comBor;
		position: sticky;
		top: 0;
		display: flex;
		background: var(--ffBg);
		.tabItem{
			flex: 1;
			line-height: var(--hei90);
			text-align: center;
			color: $pss-text-color8;
			font-size: 30rpx;
			position:relative;
			.lineView{
				width: 14%;
				height: 8rpx;
				background: $pss-color-blueDeep;
				border-radius: 20rpx;
				left: 44%;
				bottom: 18rpx;
				display: none;
			}
			&.active{
				color: $pss-color-blueDeep;
				font-weight: 600;
				.lineView{
					display: block;
				}
			}
		}
	}
</style>